<template>
  <!-- 弹框 -->
  <el-dialog
    align="center"
    @opened="opened"
    :before-close="CloseWindow"
    :title=this.form.title
    :visible="showForm"
    width="40%"
    v-dialogDrag>
    <!-- @submit.native.prevent 阻止表单默认提交-->
    <el-form ref="addInfo" :model="form" label-width="20%" size="Large" status-icon @submit.native.prevent>
      <el-form-item
        label="坐标"
        prop="cover"
        style="width: 55%;">
        <el-tooltip class="item" effect="light" :content="form.info" placement="top-end">
        <el-input v-model="this.form.Whereply2" :disabled="true"></el-input>
        </el-tooltip>
      </el-form-item>
      <el-form-item
        label="地块名"
        prop="name"
        style="width: 55%;">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item
        label="面积"
        style="width: 55%;"
        prop="area">
        <el-input v-model="form.area"></el-input>
      </el-form-item>
      <el-form-item
        label="状态"
        style="width: 44%;"
        prop="state">
        <el-radio v-model="form.state" label="1">空闲</el-radio>
        <el-radio v-model="form.state" label="0">在用</el-radio>
        <el-radio v-model="form.state" label="2">废弃</el-radio>
      </el-form-item>

      <el-form-item style="width: 50%;">
        <!-- native-type="submit" 设置该按钮未表单默认提交按钮，从而实现回车提交-->
        <el-button type="primary" @click="onSubmit('addInfo')" native-type="submit">确认</el-button>
        <el-button @click="Clear('addInfo')">重置</el-button> <!-- //重置表单，必须加入表单ref值-->
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script>
  import {deleOneCover,getOneCover,saveCover,getAllCover,getCouList,getStuList, UpStuCou,deleteStu,findLikeStus} from '@/api/userApi' //导入接口工具
  export default {
    props: ["Whereply",],
    components: {},
    data() {
      return {
        showForm: false,
        form: {
          info:"已自动填写",
          title:'注册地块',
          Whereply2:null,
          area: null,
          state: '0',
          name: null,
        },
        ply:null, //地块列表中，实时索引的地块对象
        PlyEntity:null,//每一次的提交成功返回的数据都放着
      }
    },
    methods: {
      //打开后 回调
      opened(){
        var ss =[]
        if (this.Whereply!=null){  //首次注册
          for (let i = 0 ;i<this.Whereply.getPath().length;i++){
            ss.push(this.Whereply.getPath()[i].lng,this.Whereply.getPath()[i].lat)//赋值坐标
          }
          this.form.Whereply2 =ss.toString()
        } if (this.ply!=null) {  //二次修改
          this.form.Whereply2 ="不可更改"
          this.form.title = '修改地块信息'
          this.form.info = "已固定"
          //信息回填
            this.form.area = this.ply.area
            this.form.name = this.ply.name
            this.form.state = this.ply.state.toString()
          console.log("this.ply",this.ply)
        }
      },
      //重置表单
      Clear() {
        console.log("重置了")
        this.$refs['addInfo'].resetFields();//清空表单
      },

      //关闭窗口
      CloseWindow(done) {
        done();//关闭对话
        this.showForm = !this.showForm
      },

      //提交表单
      onSubmit(done) {
        this.showForm = !this.showForm
        //修改信息
        if (this.ply != null) {
          if (this.ply.mapCover != null) {  //条件成立，则表明覆盖物已经提交过，
            saveCover(this.ply.mapCover, this.ply.color, this.form.name, this.form.area, this.form.state).then(response => {
              const data = response.data//获取后台响应的原始数据,不用再循环
              console.log("ee",data)
              //把当前覆盖物赋值给外部组件,用于信息回填
              this.ply = data
              this.$notify({
                title: '修改成功',
                message: this.$createElement('i', { style: 'color: teal'}, '地块信息已经修改')
              });
            })
          }
        }
      },


    },
    mounted() {

    },

  }
</script>

<style scoped>

</style>
